<template>
  <div>
    <Banner :bannerList="bannerList" ref="banner"></Banner>
    <div :class="{ fixed: isFixed }">
      <div v-show="isFixed" style="text-align:center">电影</div>
      <div class="middle">
        <div class="item">
          <router-link to="/film/nowplaying">正在热映</router-link>
        </div>
        <div class="item">
          <router-link to="/film/comingsoon">即将上映</router-link>
        </div>
      </div>
    </div>

    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<style lang="scss" scoped>
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  background-color: white;
  z-index: 9999;
  width: 100%;
}
.middle {
  display: flex;
  .item {
    flex: 1;
    text-align: center;
  }
}
</style>

<script>
import { bannerQuery } from "../model/bannerModel";
import Banner from "../components/film/BannerView.vue";

export default {
  components: {
    Banner,
  },
  data() {
    return {
      isFixed: false,
      bannerList: [],
    };
  },
  async created() {
    let res = await bannerQuery();
    this.bannerList = res.data;
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  },
  methods: {
    scroll() {
      let scrollTop = document.documentElement.scrollTop;
      let bannerHeight = this.$refs.banner.$el.offsetHeight;
      if (scrollTop > bannerHeight) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
};
</script>
